<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <title>客户管理</title>
  <link rel="stylesheet" href="../../css/bootstrap.font.min.css"/>
  <link rel="stylesheet" href="../../css/forms.min.css"/>
  <link rel="stylesheet" href="../../css/style.css"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top to-nav">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand to-brand" href="#"><i class="fa fa-weixin fa-fw"></i>&nbsp;&nbsp;SZG 后台管理系统</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-gear"></i>&nbsp;Mr Toma&nbsp;<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">个人信息</a></li>
            <li><a href="#">修改密码</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">退出系统</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- navbar-collapse -->
  </div>
</nav>
<!-- 菜单 start -->
<aside class="sidebar_left">
  <div class="sidebar_content">
    <ul class="nav">
      <li class="active">
        <a href="#" class="nav-link"><i class="fa fa-group"></i>客户管理</a>
        <ul class="link-lop">
          <li><a href="javascript:">客户查询</a></li>
          <li><a href="javascript:">说的</a></li>
        </ul>
      </li>
      <li><a href="#" class="nav-link"><i class="fa fa-wrench"></i>网站设置</a></li>
    </ul>
  </div>
</aside>
<!-- 菜单 end -->
<section class="content">
  <div class="con-wap">
    <!-- view start -->

    <ol class="breadcrumb border">
      <li><a href="#">客户管理</a></li>
      <li class="active">客户查询</li>
    </ol>

    <article class="panel panel-default">
      <div class="panel-heading">
        <div class="row">
          <div class="col-sm-4">
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-search"></i></span>
              <input type="text" class="form-control" placeholder="输入关键字搜索,如：姓名,证件号,手机号..." name="">
            </div>
          </div>
          <button type="button" class="btn btn-info w90">查询</button>
          <button type="button" class="btn btn-link" data-toggle="modal" data-target="#searchModal">高级搜索</button>
        </div>
      </div>
      <div class="panel-body displayt w100b">
        <div class="cell">
          <div class="btn-group">
            <button type="button" class="btn btn-warning" id="custorAddBtn">增加客户</button>
            <button type="button" class="btn btn-warning">批量导入</button>
          </div>
          <button type="button" class="btn btn-success" id="custorEdit" disabled>修改客户</button>
          <button type="button" class="btn btn-danger" id="custorDel" disabled>删除客户</button>
        </div>
        <div class="text-right cell">
          <button type="button" class="btn btn-success">模板下载</button>
        </div>
      </div>
      <!-- Table -->
      <table class="table table-striped table-hover admin-form app-table">
        <thead>
        <tr>
          <th>
            <label class="option option-primary">
              <input type="checkbox" name="checked" id="checkall">
              <span class="checkbox"></span>
            </label>
          </th>
          <th>类型</th>
          <th>姓名</th>
          <th>拼音姓</th>
          <th>拼音名</th>
          <th>国籍</th>
          <th>性别</th>
          <th>证件类型</th>
          <th>证件号码</th>
          <th>出生日期</th>
          <th>年龄</th>
          <th>手机</th>
          <th>状态</th>
          <th>备注</th>
        </tr>
        </thead>
        <tbody>

        <tr>
          <td>
            <label class="option option-primary">
              <input type="checkbox" name="checked" class="checkboxes">
              <span class="checkbox"></span>
            </label>
          </td>
          <td>
            成人
          </td>
          <td>啦啦啦</td>
          <td>Otto</td>
          <td>Smdo</td>
          <td>中国</td>
          <td>女</td>
          <td>护照</td>
          <td>1301051995324587</td>
          <td>13964545818</td>
          <td>1980-08-08</td>
          <td>80</td>
          <td><span class="text-success">正常</span></td>
          <td>是的疯狂</td>
        </tr>

        <tr>
          <td>
            <label class="option option-primary">
              <input type="checkbox" name="checked" class="checkboxes">
              <span class="checkbox"></span>
            </label>
          </td>
          <td>
            成人
          </td>
          <td>啦啦啦</td>
          <td>Otto</td>
          <td>Smdo</td>
          <td>中国</td>
          <td>女</td>
          <td>护照</td>
          <td>1301051995324587</td>
          <td>13964545818</td>
          <td>1980-08-08</td>
          <td>80</td>
          <td><span class="text-success">正常</span></td>
          <td>--</td>
        </tr>


        </tbody>
      </table>
      <div class="panel-footer">
        <nav class="clearfix">
          <ul class="pagination pull-right">
            <li>
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
              <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </article>

    <!-- view end -->
  </div>
</section>

<!-- 高级搜索 -->
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="searchModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">高级搜索</h4>
      </div>
      <div class="modal-body admin-form">
        <form action="#" id="advSearchForm">
        <div class="row">
          <div class="col-sm-4">
            <div class="section">
              <label class="field select">
                <select name="custorType">
                  <option value="">旅客类型</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="section">
              <label class="field select">
                <select name="status">
                  <option value="">状态</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="section">
              <label class="field select">
                <select  name="citizenship">
                  <option value="">国籍</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field">
                <input type="text" name="name" class="gui-input" placeholder="姓名">
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field select">
                <select name="sex">
                  <option value="">性别</option>
                  <option value="1">男</option>
                  <option value="2">女</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section displayt w100b nowrap">
              <div class="cell lh40">年龄：</div>
              <div class="cell">
                <label class="field">
                  <input type="number" name="minAge" class="gui-input" placeholder="最小">
                </label>
              </div>
              <div class="cell lh40">&nbsp;至 </div>
              <div class="cell">
                <label class="field">
                  <input type="number" name="maxAge" class="gui-input" placeholder="最大">
                </label>
              </div>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field">
                <input type="text" name="birthday" class="gui-input form_datetime" placeholder="出生日期 如：1951-01-31">
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field select">
                <select name="cardType">
                  <option value="">证件类型</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field">
                <input type="text" name="cardID" class="gui-input" placeholder="证件号码">
              </label>
            </div>
          </div>


          <div class="col-sm-12">
            <div class="section">
              <label class="field">
                <input type="text" name="tel" class="gui-input" placeholder="手机号码">
              </label>
            </div>
          </div>

        </div><!-- row -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default w90" data-dismiss="modal">返回</button>
        <button type="button" class="btn btn-primary w90" id="advSearch">搜索</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- 新增客户 -->
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="custorAddModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">新增客户</h4>
      </div>
      <div class="modal-body admin-form">
        <form action="#" id="custorAddForm">
        <div class="row">
          <div class="col-sm-4">
            <div class="section">
              <label class="field select">
                <select name="selectID">
                  <option value="">客户类型</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="section">
              <label class="field select">
                <select name="selectID">
                  <option value="">国籍</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="section">
              <label class="field select">
                <select name="selectID">
                  <option value="">性别</option>
                  <option value="1">女</option>
                  <option value="2">男</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="section">
              <label class="field">
                <input type="text" name="from" class="gui-input" placeholder="姓名">
              </label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="section">
              <label class="field">
                <input type="text" name="from" class="gui-input" placeholder="拼音姓">
              </label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="section">
              <label class="field">
                <input type="text" name="from" class="gui-input" placeholder="拼音名">
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field select">
                <select name="selectID">
                  <option value="">证件类型</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option</option>
                </select>
                <i class="arrow double"></i>
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field">
                <input type="text" name="from" class="gui-input" placeholder="证件号码">
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field">
                <input type="text" name="from" class="gui-input form_datetime" placeholder="出生日期 如：1951-01-31">
              </label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="section">
              <label class="field">
                <input type="text" name="from" class="gui-input" placeholder="手机号码">
              </label>
            </div>
          </div>

          <div class="col-sm-12">
            <div class="section">
              <label class="field prepend-icon">
                <textarea class="gui-textarea" id="comment" name="comment" placeholder="备注信息"></textarea>
                <label for="comment" class="field-icon"><i class="fa fa-comments"></i></label>
                <span class="input-footer"><strong>PS:</strong> 简洁有用的备注信息</span>
              </label>
            </div>
          </div>

        </div><!-- row -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default w90" data-dismiss="modal">返回</button>
        <button type="button" class="btn btn-primary w90" id="custorAdd">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<script src="../../lib/jquery.min.js"></script>
<script src="../../js/sea.js"></script>
<script src="../../js/main.js"></script>
<script>
  seajs.use(['customer','table','tker-css']);
</script>
</body>
</html>